<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title> 汉语拼音 </title>

        <style type="text/css">
            table { border-collapse: collapse; }
            th, td { width: 62px; height: 62px; border: #ccc 2px solid; }
            th { background: url(e.gif) no-repeat center center; }
            td { background: url(p.gif) no-repeat center center; font-family: 楷体; font-size: 46px; text-align: center; font-weight: bold; }
        </style>
    </head>

    <body>
        <div id="tbl"></div>
        <script type="text/javascript">
        <!--
            function show(lines) {
                var html = "<table>";
                for (var i = 0; i < lines.length; i++)
                {
                    html += ('<tr><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th></tr>');
                    html += ('<tr>');
                    var style = "";
                    for (var j = 0; j < 10; j++)
                    {
                        if (lines[i].substr(j, 1) == "-")
                        {
                            style = "style='font-size:20px; vertical-align:bottom;'"
                        }
                        html += ('<td ' + style + '>');
                        if (j < lines[i].length)
                        {
                            html += (lines[i].substr(j, 1) == "-" ? "作者:" : lines[i].substr(j, 1));
                        }
                        html += ('</td>');
                    }
                    html += ('</tr>');
                }

                document.getElementById("tbl").innerHTML = html + "</table>";
            }

            function refresh() {
                var ctx = document.getElementById("ctx");
                var lines = ctx.value.split('\n')
                //alert(lines);
                show(lines);
            }

            window.onload = function () {
                refresh();
            }
        //-->
        </script>
        <br /><br />
<textarea id="ctx" rows=6 cols=50>
  春晓 -孟浩然
 春眠不觉晓，
 处处闻啼鸟，
 夜来风雨声，
 花落知多少。</textarea>
        <input type="button" onclick="refresh();" value="刷新" />
        <p>
        <pre>
  天净沙·秋思
      -马致远
 枯藤老树昏鸦，
 小桥流水人家，
 古道西风瘦马。
 夕阳西下，
 断肠人在天涯。



  早发白帝城-李白
 朝辞白帝彩云间，
 千里江陵一日还，
 两岸猿声啼不住，
 轻舟已过万重山。



  赋得古原草送别
      -白居易
 离离原上草，
 一岁一枯荣。
 野火烧不尽，
 春风吹又生。
 远芳侵古道，
 晴翠接荒城。
 又送王孙去，
 萋萋满别情。


  相思 -王维
 红豆生南国，
 春来发几枝。
 愿君多采撷，
 此物最相思。


  登鹳雀楼 -王之涣
 白日依山尽，
 黄河入海流。
 欲穷千里目，
 更上一层楼。


  静夜思 -李白
 床前明月光，
 疑是地上霜。
 举头望明月，
 低头思故乡。


  江雪 -柳宗元
 千山鸟飞绝，
 万径人踪灭。
 孤舟蓑笠翁，
 独钓寒江雪。


  寻隐者不遇-贾岛
 松下问童子，
 言师采药去。
 只在此山中，
 云深不知处。


 九月九日忆山东兄弟
       -王维
 独在异乡为异客，
 每逢佳节倍思亲。
 遥知兄弟登高处，
 遍插茱萸少一人。


  凉州词 -王翰
 葡萄美酒夜光杯，
 欲饮琵琶马上催。
 醉卧沙场君莫笑，
 古来征战几人回。


  秋夕 -杜牧
 银烛秋光冷画屏，
 轻罗小扇扑流萤。
 天阶夜色凉如水，
 坐看牵牛织女星。


  枫桥夜泊 -张继
 月落乌啼霜满天，
 江枫渔火对愁眠。
 姑苏城外寒山寺，
 夜半钟声到客船。


  回乡偶书-贺知章
 少小离家老大回，
 乡音无改鬓毛催。
 儿童相见不相识，
 笑问客从何处来。


 送杜少府之任蜀州
      -王勃
 城阙辅三秦，
 风烟望五津。
 与君离别意，
 同是宦游人。
 海内存知己，
 天涯若比邻。
 无为在岐路，
 儿女共沾巾。


  咏鹅 -骆宾王
 鹅，鹅，鹅，
 曲项向天歌。
 白毛浮绿水，
 红掌拨清波。


  咏柳 -贺知章
 碧玉妆成一树高，
 万条垂下绿丝绦。
 不知细叶谁裁出，
 二月春风似剪刀。


  游子吟 -孟郊
 慈母手中线，
 游子身上衣。
 临行密密缝，
 意恐迟迟归。
 谁言寸草心，
 报得三春晖。


  绝句 -杜甫
 两个黄鹂鸣翠柳，
 一行白鹭上青天。
 窗含西岭千秋雪，
 门泊东吴万里船。


  春夜喜雨 -杜甫
 好雨知时节，
 当春乃发生。
 随风潜入夜，
 润物细无声。
 野径云俱黑，
 江船火独明。
 晓看红湿处，
 花重锦官城。


  江南春 -杜牧
 千里莺啼绿映红，
 水村山郭酒旗风。
 南朝四百八十寺，
 多少楼台烟雨中。



        </pre>
        </p>
    </body>
</html>
